<template>
    <wxTopStatus backgroundColor="#fff">
        <view class="navTitle"> 找产品 </view>
    </wxTopStatus>
    <view class="home-top p-[30rpx]">
        <!--		<fui-sticky>-->
        <!-- <TopSearch class="fui-header" :style="{ marginTop: Number(statusBarHeight)  + 'px' }"
      @uploadSearch="prodSearchFn" @clickPhoto="showActionSheet = true">
    </TopSearch> -->
        <view @click.stop="$jump('/views/subViews/findProduct/searchProduct/index')">
            <searchCom disabled></searchCom>
        </view>

        <!--		</fui-sticky>-->
        <view class="home-content">
            <scroll-view roll-view scroll-x="true">
                <view class="classified">
                    <view class="item" @click="changeCategory({ id: '' })">
                        <image
                            :src="
                                page.params.categoryId == ''
                                    ? $getImg('/img/images/home/Popular2.png')
                                    : $getImg('/img/images/home/Popular1.png')
                            "
                        ></image>
                    </view>

                    <view
                        class="item"
                        :class="page.params.categoryId == item.id ? 'select' : ''"
                        v-for="(item, index) in tabs"
                        :key="index"
                        @click="changeCategory(item)"
                    >
                        <image
                            :src="page.params.categoryId == item.id ? item.selectedPic : item.pic"
                        ></image>
                        <!--<view class="text">{{ item.name }}</view>-->
                    </view>
                </view>
            </scroll-view>

            <!--排序-->
            <!-- <Sort :data="sorts" @change="changeSort"></Sort> -->
        </view>
    </view>
    <view class="list">
        <MeScrollPage type="body" ref="meScrollPageRef" :page="page">
            <Waterfall ref="WaterfallRef" :data="page.data"></Waterfall>
        </MeScrollPage>
    </view>
</template>

<script lang="ts" setup>
import { PageProps } from '@/hooks/usePage'
import { prodCategoryList, prodPage, prodCollect } from '@/api/home'
import Waterfall from '../../components/waterfall/index.vue'
import searchCom from '../components/search.vue'
const WaterfallRef = ref<any>(null)
const meScrollPageRef = ref()

interface TabsType {
    checked: boolean
    id: string
    name: string
    pic: string
    selectedPic: string

    [propName: string]: any
}

interface SortType {
    label: string
    // 排序字段名称
    value: string | number
    checked: boolean
    // 排序字段
    sort: string | 'ascs' | 'descs'
    // 是否隐藏排序图标
    hideIcon?: boolean
}
const waterResetLoad = () => {
    WaterfallRef.value && WaterfallRef.value.resetLoadmore()
}

const changeSort = (val: SortType) => {
    console.log('changeSort', val.sort, val.value)
    if (val) {
        page.ascs = []
        page.descs = []
        page[val.sort as keyof PageProps] = [val.value]
        meScrollPageResetData('triggerDownScroll')
    }
}

const changeCategory = (val: unknown) => {
    page.params.categoryId = (val as TabsType).id
    meScrollPageResetData('triggerDownScroll')
}

const meScrollPageResetData = (type = 'reset') => {
    console.log(type)

    if (type === 'reset') {
        meScrollPageRef.value && meScrollPageRef.value.resetData()
    } else {
        meScrollPageRef.value && meScrollPageRef.value.triggerDownScrollFn()
    }
}
const page = reactive<PageProps>({
    params: {
        categoryId: ''
    },
    ascs: [],
    descs: [],
    data: [],
    fetchData: prodPage,
    beforeLoadingFn: waterResetLoad
})

const sorts = ref<Array<SortType>>([
    {
        label: '默认',
        value: 'sort',
        checked: false,
        sort: 'ascs',
        hideIcon: false
    },
    {
        label: '销量',
        value: 'sale_num',
        checked: true,
        sort: 'descs'
    },
    {
        label: '价格',
        value: 'amount',
        checked: false,
        sort: 'ascs'
    }
])

// tabs
const tabs = ref<Array<ICategory>>([])
// 产品分类
const prodCategoryListFn = async () => {
    const { code, msg, data } = await prodCategoryList({ pid: -1 })
    if (code == 0) {
        tabs.value = data
    } else {
        uni.$u.toast(msg)
    }
}

onLoad(() => {
    prodCategoryListFn()
})
</script>
<style lang="scss" scoped>
.home-content {
    padding-top: 20rpx;
}

.navTitle {
    font-weight: 700;
    font-size: 18px;
}
.classified {
    display: flex;
    margin-bottom: 20px;
    //overflow-x: auto;

    .item {
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        min-width: 50px;

        image {
            width: 44px;
            height: 44px;
            border-radius: 4px;
        }

        .text {
            width: 100%;
            text-align: center;

            font-size: 14px;
            font-weight: normal;
            line-height: 20px;
            letter-spacing: 0px;

            /* Disabled button */
            color: #999999;
        }
    }

    .item.select {
        .text {
            color: #242424;
        }
    }

    .item:last-child {
        margin: 0;
    }
}
</style>
